<template>
  <div class="box">
    <h1>这是一个计数器</h1>
    <button @click="handler1">点击我加一</button>
    <button @click="handler2">点击我减一</button>
    <button @click="handler3">点击我奇数加一</button>
    <button @click="handler4">点击我偶数加一</button>
    <button @click="handler5">点击我延迟2s加100</button>
    <h3 class="box2">____{{ $store.state.count }}____</h3>
    <h3>{{ $store.getters.me }}</h3>
    <h4>{{ count }}</h4>
    <h4>{{ me }}</h4>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  name: "nihao",
  methods: {
    handler1() {
      this.$store.dispatch("addone");
    },
    handler2() {
      this.$store.dispatch("jianone");
    },
    handler3() {
      this.$store.dispatch("addodd");
    },
    handler4() {
      this.$store.dispatch("addeven");
    },
    handler5() {
      this.$store.dispatch("yanche", 100);
    },
  },
  computed: {
    ...mapGetters(["me"]),
    ...mapState(["count"]),
  },
};
</script>

<style scoped>
.box {
  height: 630px;
  width: 630px;
  border: 1px solid black;
  margin: 100px auto;
}
.box2 {
  margin-left: 38%;
}
button {
  margin-left: 13px;
}
h1 {
  margin-left: 170px;
}
</style>
